import React ,{Component} from 'react'
import style from './css/otherProduct.css'
import OtherProductImg from './OtherProductImg'
class OtherProduct extends Component{
    constructor(props){
        super(props)
        this.state={
            img:['img/TB2lpdUlFXXXXa4XXXXXXXXXXXX_!!207592.jpg','img/TB2QsDanpXXXXcYXpXXXXXXXXXX_!!207592.jpg',
                'img/TB2wfJYlFXXXXaxXXXXXXXXXXXX_!!207592.jpg','img/TB1OcJwMXXXXXbjXFXXXXXXXXXX_!!0-item_pic.jpg'],
            price: [126.00,132.00,154.00,145.00],
            website: ["#","#","#","#"]
        }
    }
    productChange(){
        var product=[['img/TB2lpdUlFXXXXa4XXXXXXXXXXXX_!!207592.jpg',"#","126.00"],
            ['img/TB2QsDanpXXXXcYXpXXXXXXXXXX_!!207592.jpg',"#","132.00"],
            ['img/TB2wfJYlFXXXXaxXXXXXXXXXXXX_!!207592.jpg',"#","154.00"],
            ['img/TB1OcJwMXXXXXbjXFXXXXXXXXXX_!!0-item_pic.jpg',"#","145.00"],
            ['img/TB2bbwKspXXXXcvXXXXXXXXXXXX_!!207592.jpg',"#","134.00"],
            ['img/TB2ijVztpXXXXaEXXXXXXXXXXXX_!!207592.jpg',"#","131.00"],
            ['img/TB2ldYfmFXXXXcqXpXXXXXXXXXX_!!207592.jpg',"#","198.00"],
            ['img/TB2QiO0al4lpuFjy1zjXXcAKpXa_!!207592.jpg',"#","125.00"]
        ];
        var num1,num2,num3,num4;
        num1 = Math.ceil(Math.random()*product.length)-1;
        num2 = Math.ceil(Math.random()*product.length)-1;
        num3 = Math.ceil(Math.random()*product.length)-1;
        num4 = Math.ceil(Math.random()*product.length)-1;
        this.setState({
            img:[product[num1][0],product[num2][0],product[num3][0],product[num4][0]],
            price:[product[num1][2],product[num2][2],product[num3][2],product[num4][2]],
            website:[product[num1][1],product[num2][1],product[num3][1],product[num4][1]]
        })

    }
    render(){
        return(
            <div>
                <div>
                    <h5 className={style.titl}>看了又看</h5>
                    <span id={style.flash} onClick={this.productChange.bind(this)}>
                        <img src="img/QQ截图20161213181325.png"/>
                    </span>
                </div>
                <div>
                    <div className={style.paiban} >
                        <OtherProductImg id="1" img={this.state.img[0]} price={this.state.price[0]} website={this.state.website[0]}/>
                    </div>
                    <div className={style.paiban} >
                        <OtherProductImg id="2" img={this.state.img[1]} price={this.state.price[1]} website={this.state.website[1]}/>
                    </div>
                    <div className={style.paiban} >
                        <OtherProductImg id="3" img={this.state.img[2]} price={this.state.price[2]} website={this.state.website[2]}/>
                    </div>
                    <div className={style.paiban} >
                        <OtherProductImg id="4" img={this.state.img[3]} price={this.state.price[3]} website={this.state.website[3]}/>
                    </div>
                </div>
            </div>
        )
    }
}

export default OtherProduct